<template>
    <div class="container0">
        <div v-if="mode" class="container1">
            <div class="title1">登录 PropRiskAI</div>
            <el-text>没有账户？</el-text>
            <el-button type="primary" text @click="handleClickReg">立即注册</el-button>
            <el-input size="large" v-model="inputUsername" class="input1" placeholder=" 请输入账号"/>
            <el-input size="large" v-model="inputPassword" type="password" class="input2"  placeholder=" 请输入密码"/>
            <!-- <slideVerify ref="verify_slider" style="margin-top: 20px;margin-bottom: 20px;"></slideVerify> -->
            <el-checkbox v-model="policyChecked1" label="" size="large" style="margin-bottom: 5px;">
                我已经阅读并同意
                <el-button style="padding: 0;" type="primary" text @click="showServiceArtical=true">《服务条款》</el-button>和<el-button @click="showPrivacyArtical=true" style="padding: 0;" type="primary" text>《隐私条款》</el-button>
            </el-checkbox>
            <el-button type="primary" class="button1" @click="handleLogin">
                登录
            </el-button>
        </div>
        <div v-else="mode" class="container1">
            <div class="title1">注册 PropRiskAI</div>
            <el-text>已有帐号？</el-text>
            <el-button type="primary" text @click="handleClickReg">立即登录</el-button>
            <el-input size="large" v-model="inputUsernameReg" class="input1" placeholder=" 请输入账号"/>
            <el-input size="large" v-model="inputPasswordReg" type="password" class="input2"  placeholder=" 请输入密码"/>
            <el-input size="large" v-model="inputPasswordReg2" type="password" class="input3"  placeholder=" 请确认密码"/>

            <el-checkbox v-model="policyChecked2" label="" size="large" style="margin-bottom: 5px;">
                我已经阅读并同意
                <el-button style="padding: 0;" type="primary" text @click="showServiceArtical=true">《服务条款》</el-button>和<el-button @click="showPrivacyArtical=true" style="padding: 0;" type="primary" text>《隐私条款》</el-button>
            </el-checkbox>
            <el-button type="primary" class="button1" @click="handleRegister">
                注册
            </el-button>
        </div>
    </div>
    <el-dialog v-model="showServiceArtical" width="1000">
欢迎您使用我们的服务（以下简称“服务”），本用户协议（以下简称“协议”）是您与Intelliflux智流光年（以下简称“我们”或“我们的”）之间的法律协议，规定了您使用我们的网站（http://47.96.71.27:3000/）及服务的条款和条件。在访问或使用我们的服务之前，请仔细阅读本协议。<br />
<br />1. 接受协议<br />
通过访问或使用我们的服务，您同意遵守本协议的所有条款和条件。如果您不同意本协议的任何部分，请不要使用我们的服务。<br />
2. 服务描述<br />
我们的服务可能包括但不限于：房企关联查询、供应商风险查询。我们保留随时更改、暂停或终止服务的权利，恕不另行通知。<br />
3. 用户账户<br />
为了使用某些服务，您可能需要创建一个用户账户。您同意提供准确、完整和最新的信息，并及时更新这些信息。您对您的账户和密码的安全负有全部责任。<br />
4. 用户行为<br />
您同意仅出于合法目的使用我们的服务，并遵守所有适用的法律和法规。您不得：<br />
* 上传或传播任何违法、侵权、诽谤、淫秽或威胁的内容。<br />
* 干扰或破坏我们的服务或网络。<br />
* 尝试未经授权访问我们的服务或系统。<br />
5. 知识产权<br />
我们的服务及其内容，包括文本、图像、视频和软件，受版权、商标和其他知识产权法律的保护。您同意不复制、分发、修改或创建衍生作品，除非我们明确授权。<br />
6. 免责声明<br />
我们的服务按“现状”提供，我们不提供任何明示或暗示的保证，包括但不限于对适销性、特定用途的适用性和非侵权性的保证。<br />
7. 责任限制<br />
在任何情况下，我们或我们的供应商均不对任何直接、间接、偶然、特殊、后果性或惩罚性损害负责，包括但不限于利润损失、数据丢失或业务中断，即使我们已被告知此类损害的可能性。<br />
8. 终止<br />
我们保留在任何时候以任何理由终止或暂停您访问或使用服务的权利，恕不另行通知。<br />
9. 修改<br />
我们可能会不时修改本协议。任何更改将在本页面上发布，并在生效前通知您。<br />
10. 适用法律<br />
本协议受中华人民共和国法律管辖，并按其解释。<br />
11. 联系我们<br />
如果您对本协议有任何疑问或需要帮助，请通过邮箱与我们联系。<br /><br />
Intelliflux<br />
智流光年&emsp;中国湖北省武汉市武昌区光谷科技园22号support@propriskai.com<br />
    </el-dialog>
    <el-dialog v-model="showPrivacyArtical" width="1000">
本隐私政策描述了当您访问我们的网站（http://47.96.71.27:3000/）或使用我们的服务时，我们如何收集、使用、存储和保护您的个人信息。我们承诺遵守适用的数据保护法律和法规，并确保您的个人信息安全。<br />
<br />1. 信息收集<br />
&emsp;我们可能会收集以下类型的个人信息：<br />
* 联系信息：如姓名、电子邮件地址、电话号码等。<br />
* 账户信息：如用户名、密码等。<br />
* 使用数据：如访问时间、浏览页面、点击的内容等。<br />
* 技术数据：如IP地址、浏览器类型、操作系统等。<br />
<br />2. 信息使用<br />
&emsp;我们使用您的个人信息来：<br />
* 提供、维护和改进我们的服务。<br />
* 处理您的请求和订单。<br />
* 发送通知和更新。<br />
* 保护我们的服务和用户的安全。<br />
* 遵守法律义务。<br />
<br />3. 信息共享<br />
&emsp;我们不会将您的个人信息出售、出租或以其他方式共享给第三方，除非：<br />
* 获得您的明确同意。<br />
* 为了提供您请求的服务或功能。<br />
* 遵守法律要求或响应法律程序。<br />
* 保护我们的权利、财产或安全，或我们的用户和公众的权利、财产或安全。<br />
4.信息安全我们采取适当的安全措施来保护您的个人信息免受未经授权的访问、披露、更改或破坏。<br />
5.用户权利您有权访问、更正、删除您的个人信息。您也可以随时撤回您的同意，并要求我们停止处理您的个人信息。<br />
6.隐私政策的变更我们可能会不时更新本隐私政策。任何更改将在本页面上发布，并在生效前通知您。<br />
7.联系我们如果您对本隐私政策有任何疑问或需要帮助，请通过[填写联系方式]与我们联系。<br />
请注意，本隐私政策仅适用于我们的网站和服务，不适用于通过我们的服务链接到的第三方网站或服务。<br /><br />
Intelliflux<br />
智流光年&emsp;中国湖北省武汉市武昌区光谷科技园22号support@propriskai.com<br />
    </el-dialog>
    <el-dialog v-model="showVerify1" width="500"  :before-close="handleClose1">
        请先完成验证
        <slideVerify ref="verify_slider" style="margin-top: 20px;margin-bottom: 20px;"></slideVerify>
    </el-dialog>
    <el-dialog v-model="showVerify2" width="500" :before-close="handleClose2">
        请先完成验证
        <slideVerify ref="verify_slider" style="margin-top: 20px;margin-bottom: 20px;"></slideVerify>
    </el-dialog>
</template>

<style scoped>

.container0{
    /*margin: auto;*/
    height: 85vh;
    background: url(../assets/背景图-登录.png) no-repeat;
    background-size: 100% 100%;
    z-index: -1;
    /*margin-top: 200px;*/
}

.container1{
    margin-left: 900px;
    border-radius: 20px;
    background-color: white;
    padding: 50px;
    width:25vw;
    margin-top: 100px;
    position: relative;top: 50%;transform: translateY(-50%);
    padding-bottom: 200px;
    padding-top: 100px;
}


.input1{
    border-radius: 15px;
    height: 50px;
    text-align: center;
    margin-bottom: 10px;
    margin-top: 5px;
}

.input2{
    
    border-radius: 15px;
    height: 50px;
    margin-bottom: 10px;
}

.input3{
    border-radius: 15px;
    height: 50px;
    margin-bottom: 5px;
}

.title1{
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 30px;
}

.button1{
    display: block;
    margin: auto;
    text-align: center;
    width: 100%;
    height: 50px;
    border-radius: 10px;
}

:deep(.el-input){
    --el-input-border-radius:10px
}

:deep(.el-checkbox){
    --el-checkbox-checked-text-color:#000000;
}
</style>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
let mode=ref(true)
import bus from '../bus';
import { ElMessage } from 'element-plus';
import slideVerify from './slideVerify.vue'
import axios from 'axios'
import { useRouter } from 'vue-router';
import {useStore} from 'vuex'
import {Md5} from 'ts-md5'

const router=useRouter()
let inputUsername=ref('')
let inputPassword=ref('')
let inputUsernameReg=ref('')
let inputPasswordReg=ref('')
let inputPasswordReg2=ref('')
const verified=ref(false)
const logined=ref(true)
const store=useStore()
let policyChecked1=ref(false)
let policyChecked2=ref(false)
let showServiceArtical=ref(false)
let showPrivacyArtical=ref(false)
let showVerify1=ref(false)
let showVerify2=ref(false)

defineExpose({
    slideVerify
})

bus.on('verified',(e)=>{
        verified.value=true
    })

bus.on('verify_refreshed',(e)=>{
        verified.value=false
    })

const handleClickReg=()=>{
    if(mode.value==true)
        mode.value=false
    else mode.value=true
    bus.emit('verify_refreshed','1')
}

const handleLogin=()=>{
    if(inputUsername.value==null||inputUsername.value=='')
        {
            ElMessage({
                showClose:true,
                message:'用户名不能为空',
                center:true,
                type:'error'
            })
            return
        }
        if(inputPassword.value==null||inputPassword.value=='')
        {
            ElMessage({
                showClose:true,
                message:'密码不能为空',
                center:true,
                type:'error'
            })
            return
        }
        if(!policyChecked1.value)
        {
            ElMessage({
                showClose:true,
                message:'请先同意使用条款',
                center:true,
                type:'error'
            })
            return
        }
        showVerify1.value=true
}

const handleClose1=()=>{
    login()
    showVerify1.value=false
}

const handleRegister=()=>{
    if(inputUsernameReg.value==null||inputUsernameReg.value=='')
        {
            ElMessage({
                showClose:true,
                message:'用户名不能为空',
                center:true,
                type:'error'
            })
            return
        }
        if(inputPasswordReg.value==null||inputPasswordReg.value=='')
        {
            ElMessage({
                showClose:true,
                message:'密码不能为空',
                center:true,
                type:'error'
            })
            return
        }
        if(inputPasswordReg.value!=inputPasswordReg2.value)
        {
            ElMessage({
                showClose:true,
                message:'确认密码与密码不符',
                center:true,
                type:'error'
            })
            
            inputPasswordReg2.value=''
            return

        }

        if(!policyChecked2.value)
        {
            ElMessage({
                showClose:true,
                message:'请先同意使用条款',
                center:true,
                type:'error'
            })
            return
        }
        showVerify2.value=true
}

const handleClose2=()=>{
    register()
    showVerify2.value=false
}

const login=()=>{
        if(!verified.value)
        {
            ElMessage({
                showClose:true,
                message:'验证失败',
                center:true,
                type:'error'
            })
            return
        }
        const url="http://47.96.71.27:5000/user_api/login"
        let encryptedPassword=Md5.hashStr(inputPassword.value)
        axios.post(url,{'username':inputUsername.value,'password':encryptedPassword}).then(res_data=>{
            store.state.token=res_data.data.token
            store.state.username=res_data.data.username
            store.state.role=res_data.data.role
            console.log(store.state.token)
            console.log(store.state.username)
            ElMessage({
                showClose:true,
                message:'登录成功',
                center:true,
                type:'success'
            })
            
            verified.value=false
            showVerify1.value=false
            bus.emit('login_success','/home')
            router.push({path:'/home'})
        }).catch(error=>{
            ElMessage({
                showClose:true,
                message:error.response.data.message,
                center:true,
                type:'error'
            })
        })
        verified.value=false
        inputPassword.value=''
        bus.emit('verify_refresh','1')
}

const register=()=>{

        if(!verified.value)
        {
            ElMessage({
                showClose:true,
                message:'请先完成验证',
                center:true,
                type:'error'
            })
            return
        }        
        const url="http://47.96.71.27:5000/user_api/register"
        const encryptedPassword=Md5.hashStr(inputPasswordReg.value)
        axios.post(url,{'username':inputUsernameReg.value,'password':encryptedPassword}).then(res_data=>{
            store.state.token=res_data.data.token
            store.state.username=res_data.data.username
            store.state.role=res_data.data.role
            
            ElMessage({
                showClose:true,
                message:'注册成功',
                center:true,
                type:'success'
            })
            
            bus.emit('login_success','/home')
            router.push({path:'/home'})
        }).catch(error=>{
            ElMessage({
                showClose:true,
                message:error.response.data.message,
                center:true,
                type:'error'
            })
        })
        verified.value=false
        bus.emit('verify_refresh','1')
        inputPasswordReg.value=''
        inputPasswordReg2.value=''

}

</script>